<template>
	<div class="main">
		<cvue-dialog :dialogVisible='dialogVisible' title='编辑' :isShowFoot='true' dialogWidth='60%' @handleOpen='getDetail' @closeDialog='closeDialog' @confirmDialog='confirmDialog' @handleClose='closeDialog'>
			<div class="dialog-body" slot="dialogBody">
				<el-form inline label-width="130px">
					<el-form-item label="icon名称" required>
						<!-- <upload ref="upload" :accept="['.png','.jpg','.jpeg']" :fileSize="{size:1024*1024*10,messge:'只能上传10m以内的图片'}">
						</upload> -->
						<el-input class="formWidth" maxlength="50" type="text" v-model.trim="imgName"></el-input>
					</el-form-item>
					<div v-if="!editData.parentId">
						<el-form-item label="系统名" required>
							<el-select v-model="systemId" placeholder="请选择">
								<el-option
								v-for="item in systemData"
								:key="item.id"
								:label="item.title"
								:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="顶级栏目" required>
							<el-input class="formWidth" type="text" maxlength="10" v-model.trim="columnName"></el-input>
						</el-form-item>
					</div>
					<div v-else>
						<el-form-item label="系统名" required>
							<el-select v-model="systemId" placeholder="请选择" @change="changeSystem">
								<el-option
								v-for="item in systemData"
								:key="item.id"
								:label="item.title"
								:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="顶级栏目" required>
							<el-select class="formWidth" v-model="columnId" placeholder="请选择">
								<el-option
								v-for="item in muneData"
								:key="item.id"
								:label="item.columnName"
								:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="二级栏目" >
							<el-input class="formWidth" type="text" v-model.trim="columnName"></el-input>
						</el-form-item>
					</div>
					<el-form-item label="栏目URL" required>
						<el-input class="formWidth" type="text" maxlength="100" v-model.trim="columnURL"></el-input>
					</el-form-item>
					<el-form-item label="启用">
						<el-switch v-model="isActive">
						</el-switch>
					</el-form-item>
				</el-form>
				<el-form inline label-width="130px">
					<el-form-item label="排序" required>
						<!-- <el-input class="formWidth" type="number" v-model="sort" maxlength="20"></el-input> -->
						<el-input-number class="formWidth" v-model="sort" :min="1" :max="1000" controls-position="right" label="描述文字"></el-input-number>
					</el-form-item>
					<el-form-item label="权限码" required>
						<el-input class="formWidth" type="text" v-model.trim="permissionCode" maxlength="20"></el-input>
					</el-form-item>
				</el-form>
				
			</div>
		</cvue-dialog>
	</div>
</template>
<script>
/* eslint-disable */
import Vue from 'vue'
import cvueDialog from '@/components/cvue-dialog'
import upload from '@/components/upload2'
export default {
	name: 'editList',
	components: {
		cvueDialog, upload
	},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			title: '',
			url: '',
			mark: '',
			permissionCode: '',
			sort: 0,
			isActive: false,
			terminalType: '',
			systemId: '',
			columnName: '',
			columnURL: '',
			imgName: '',
			muneData: [],
			columnId: ''
		}
	},
	computed: {
		editData () {
           return this.$store.state.authority.editData
		},
		systemData () {
			return this.$store.state.authority.systemData
		},
		columnType () {
           return this.$store.state.authority.columnType
		}
	},
	methods: {
		getDetail () {
			this.imgName = this.editData.columnPicture
			this.systemId = this.editData.aggregateMenusId
			this.columnName = this.editData.columnName
			this.columnURL = this.editData.columnURL
			this.isActive = this.editData.isActive == 1 ? true : false
			this.sort = this.editData.sort
			this.permissionCode = this.editData.permissionCode
			this.changeSystem(this.editData.aggregateMenusId)
			this.columnId =  this.editData.parentId
		},
		closeDialog() {
			this.$emit('closeDialog')
		},
		confirmDialog() {
			this.editList()
			// this.$emit('confirmDialog')
		},
		editList() {
			if (!this.check()) {
				return
			}
			var params = {
				columnId: this.editData.columnId,
				aggregateMenusId: this.systemId,
				parentId: this.columnId,
				columnName: this.columnName,
				columnURL: this.columnURL,
				columnPicture: this.imgName,
				permissionCode: this.permissionCode,
				isActive: this.isActive ? 1 : 2,
				sort: this.sort
			}
			this.$store.dispatch('authority/EditChildMenus', params).then(
				res => {
					this.$message.success('修改成功')
					this.$emit('confirmDialog')
				}
			)
		},
		check() {
			if (!this.imgName) {
				this.$message.error('icon名称不能为空')
				return false
			}
			if (!this.systemId) {
				this.$message.error('系统名不能为空')
				return false
			}
			if (!this.columnName && !this.columnId) {
				this.$message.error('顶级栏目不能为空')
				return false
			}
			if (!this.columnName && this.columnType == 2) {
				this.$message.error('二级栏目不能为空')
				return false
			}
			if (!this.columnURL) {
				this.$message.error('栏目URL不能为空')
				return false
			}
			if (!this.sort) {
				this.$message.error('排序不能为空')
				return false
			}
			if (!this.permissionCode) {
				this.$message.error('权限不能为空')
				return false
			}
			return true
		},
		// 根据系统名 或者顶级栏目下拉框
		changeSystem (id) {
			this.columnId =  ''
			if (id) {
			   this.systemId = id
			}
			var params = {
				aggregateMenusId: this.systemId
            }
             this.$store.dispatch('authority/AggregateChildMenusOptions', params).then(res => {
                this.muneData = res
            })
		}
	}
}
</script>
<style scoped>
.main {
	background: #fff;
}
</style>
